/* styles.css */
body {
    margin: 0;
    padding: 0;

	margin: 0 auto; /* Center the container horizontally */
	background-color: #eeeeee; /* Default background color for content pages */
	padding: 0px;
	box-sizing: border-box; /* Ensures padding is included in the total width */	
	
	font-family: "Manrope", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;	
}


body.index-page {
	#background-color: black !important; /* Overrides bgcolor for index page */
	color: white;
	background: url('../images/homepage_background.jpg') no-repeat center center;
	background-size: cover;           /* stretch to always cover the viewport */
	background-attachment: fixed;     /* optional—keeps it fixed while scrolling */	
	background-color: rgba(0, 0, 0, 0.7);   /* 0.45 = 45 % black overlay */
	background-blend-mode: darken;           /* blends the color with the image */
}


.container {
    width: 70%; /* Base width for all child elements */
    max-width: 1200px; /* Optional: Add a maximum width for larger screens */
    margin: 0 auto; /* Center the container horizontally */
    padding: 0px;
    box-sizing: border-box;
}


.menu-bar {
    position: fixed;
    top: 0;
    left: 0; /* Align to the left edge of the viewport */
    width: 100%; /* Full width of the viewport */
    background-color: #333;    
    z-index: 1005;
    height: 64px; /* Set a fixed height */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center all items */
	opacity: 1;
	list-style: none;
}

.menu-bar .logo-text{
    color: #fff;
	font-size: 1.5em;
	font-weight: bold;
}

.menu-bar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically center the items */
    flex-grow: 1; /* Allow the menu to take up remaining space */
    justify-content: center; /* Center the menu items horizontally */
}

.menu-bar li {
    margin: 0;
	position: relative;	
	padding-top: 20px;
	padding-bottom: 20px;
}

.mobile-only{
    display: none;
}


.menu-bar a, span{
    text-decoration: none;
    color: #ddd;
    font-size: 1em;
    padding-left: 1em;
	padding-right: 1em;
	padding-top: 20px;
	padding-bottom: 20px;
    transition: background-color 0.3s ease;
}

.menu-bar li:hover {
    background-color: #575757;
}

.menu-bar .logo img {
	height: 50px;
	padding: 5px;
    width: auto; /* Maintain aspect ratio */
}

/* Submenu styling */
.menu-bar .submenu {
    display: none;
    position: absolute;	
    top: 100%; /* Positioned directly below the parent <li> */
    left: 0;
    background-color: #444;
    #min-width: 250px;
	min-width: 13em;
    list-style: none;
    z-index: 1001; /* Higher than the main menu */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Optional: Add shadow for clarity */
	padding: 0;
	margin: 0;
}

/* Show submenu on hover (desktop only) */
@media (hover: hover) and (pointer: fine) {
	.menu-bar li:hover .submenu {
		display: block;
	}
  
	/* Add dropdown indicator for items with submenu */
	.menu-bar li.has-submenu > span::after {
		content: "▼";  /* Down arrow (default state) */
		font-size: 1em;
		font-family: monospace; /* Forces equal width */
		#margin-left: 5px;
		margin-left: 0.3em;
		display: inline-block;
		#transition: transform 0.3s ease;
		text-align: right;
	}  
	
	/* When hover over submenu items */
	.menu-bar .submenu li:hover {  
		background-color: #5e5e5e;  	
		#border-left: 6px solid #878787; /* Blue bar on the left */
		border-left: 0.3em solid #878787; /* Blue bar on the left */	
		#padding-left: 9px; /* Adjust padding to account for the border */  
		padding-left: 0.47em; /* Adjust padding to account for the border */  	
	}
	
}




.menu-bar .submenu li {  
	margin-left: 0;
	margin-right: 0;
	#padding-left: 15px;
	#padding-right: 10px;
	
	padding-left: 0.75em;
	padding-right: 0.5em;
	
	padding-top: 0px;
	padding-bottom: 0px;
	cursor: pointer; /* Changes cursor to indicate clickable */
}

/* make whole box clickable */
.menu-bar .submenu li a {
	display: block;	
	#padding-top: 20px;
	#padding-bottom: 20px;
	#padding-left: 10px;
	
	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 0.5em;	
	
	padding-right: 0px;
	width: 100%;
	box-sizing: border-box;	
}



.active {
    background-color: #575757;
}

.footer {
	width: 100%;
	max-width: 1200px; /* Optional: constrain width */
	margin: 0 auto; /* Center the footer */
	padding-top: 5em; 
	padding-bottom: 1em;
	text-align: center; /* Center the text */
}

.footer-divider {
	height: 1px;
	background-color: #e0e0e0; /* Light gray line */
	margin: 0.5em 0; /* Space above/below the line */
	border: none; /* Remove default <hr> styling if using <hr> */
}

.footer-text {
	font-size: 0.8em; /* Small text */
	color: #666; /* Subdued color */
	margin: 0; /* Remove default margins */
	padding: 0 1em; /* Add horizontal padding if needed */
}



.content {
    margin-top: 80px; /* Height of the menu bar */
	/* position: relative; */
    padding: 0.5em;
    min-height: 400px;
    /* background-color: black;  */
    box-sizing: border-box;
    width: 100%; /* Match the container's width */
    max-width: 1200px; /* Match the container's max-width */
    margin-left: auto; /* Center the content horizontally */
    margin-right: auto; /* Center the content horizontally */
}


.content .centered-container {
    display: flex;
    flex-direction: row;       /* Stack items vertically (use "row" for horizontal) */
    align-items: center;          /* Center horizontally */
    justify-content: center;      /* Center vertically */
    gap: 20px;                   /* Adjust spacing between child elements */
    padding: 15px;               /* Adjust internal padding (space inside container) */
    margin: 0 auto;              /* Center the container itself horizontally */
	position: relative;
}

.index-page .centered-container {
    display: flex;
    flex-direction: row;       /* Stack items vertically (use "row" for horizontal) */
    align-items: center;          /* Center horizontally */
    justify-content: center;      /* Center vertically */
    gap: 0.75em;                   /* Adjust spacing between child elements */
    padding: 0.5em;               /* Adjust internal padding (space inside container) */
    margin: 0 auto;              /* Center the container itself horizontally */
	position: relative;
	z-index: 1001;
}

.index-page h1{
    font-size: 5.5em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
    transition: background-color 0.3s ease;    
    display: flex;               /* Flexbox for vertical centering */
    justify-content: center;     /* Horizontal centering (flexbox) */
    align-items: center;         /* Vertical centering */	
	text-align: center;
}

.index-page .subtitle{
	font-weight: normal;
	font-size: 2.5em;
	color: #aaaaaa;
	margin-top: 0.5em;
	margin-bottom: 0.5em;	
	text-align: center;	
}


.index-page h2{
	font-weight: normal;
	font-size: 2.4em;
	margin-top: 5px;
	margin-bottom: 5px;	
}

.index-page .button {
    /* Basic styling */
    display: inline-block;
    padding: 0.5em 1em;
    background-color: #0099ff; 
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 1.3em;
    border: none;
    border-radius: 0.5em; /* Adjust for more/less rounding */
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth hover effect */
    /* Optional: Add a slight shadow for depth */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	opacity: 0.85;	
}

/* Hover Effect */
.index-page .button:hover {
    background-color: #00ddff; /* Darker shade of green */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

/* Active (Click) Effect */
.index-page .button:active {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); /* Flatten shadow */
}

/* Container to center the card */
.card-all-container{
    display: flex;
    flex-direction: row;       /* Stack items vertically (use "row" for horizontal) */
    align-items: center;          /* Center horizontally */
    justify-content: center;      /* Center vertically */
    gap: 20px;                   /* Adjust spacing between child elements */
    padding: 15px;               /* Adjust internal padding (space inside container) */
    margin: 0 auto;              /* Center the container itself horizontally */
	position: relative;
}

.card-container {
	max-width: 30%;
	margin-left: 5px;
	margin-right: 5px;
}

/* Main card */
.blog-card {
	background-color: #1e1e1e; /* Dark gray for contrast */
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1); /* Subtle white shadow */
	overflow: hidden;
	display: block;
	text-decoration: none;
	color: #fff; /* White text for readability */
	transition: transform 0.2s ease;
}

.blog-card:hover {
	transform: translateY(-5px); 
}

/* Thumbnail section */
.card-thumbnail {
	width: 100%;
	height: 200px;
	background-size: cover;
	background-position: center;
	position: relative;
}

/* Text section */
.card-content { 
  height: 260px;
  
  padding-top: 0.7em;
  padding-left: 1em;
  padding-right: 1em;     
}

.card-title {
	font-size: 1.25rem;
	font-weight: bold;
	margin-top: 0.8em;
	margin-bottom: 0.8em;
	color: #fff; /* White title */
}

.card-excerpt {
  font-size: 0.95rem;
  color: #ccc; /* Light gray for excerpt */
  line-height: 1.4;
}

.svg-background {
  position: fixed;
  top: -10%;
  left: 50%;
  transform: translate(-50%, -20%); 
  /* width: 100px; /* Adjust size as needed */
  width: 100%;
  height: auto;
  opacity: 0.8; /* Adjust transparency here (0 = transparent, 1 = opaque) */
  z-index: 1; /* Send to back */
  pointer-events: none; /* Allow clicks to pass through */  
}


/* Base styles for the FAQ container */
.faq-item {
	border: 1px solid #ddd;
	border-radius: 8px;
	margin-bottom: 15px;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Style for the question */
.faq-question {
	background-color: #f9f9f9;
	padding: 16px 20px;
	font-size: 1.25em;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background 0.3s ease;
}

/* Hover effect on the question */
.faq-question:hover {
	background-color: #eaeaea;
}

/* Style for the answer */
.faq-answer {
	#max-height: 0;
	height: auto;
	margin: 0px;
	#overflow: hidden;
	transition: max-height 0.3s ease-out;
	padding: 16px 20px 16px 20px;
	background-color: #eee;
	font-size: 1.1em !important;
	line-height: 1.5;
}

details[open] .faq-answer {
	#max-height: 200px; /* Adjust based on your content */
}


/* Optional: Add a caret icon to indicate expand/collapse */
.faq-question::after {
  content: " ▼";
  font-size: 20px;
  transition: transform 0.3s ease;
}

details[open] .faq-question::after {
  content: " ▲";
  transform: rotate(180deg);
}


figure {
	text-align: center; /* Centers the image and caption */
	margin: 0 auto;     /* Centers the figure block */
	max-width: 100%;    /* Ensures the figure doesn't overflow */
	font-size: 0.75em;
	color: #888;
}

img {
	display: block;     /* Removes extra space below image */
	margin: 0 auto;     /* Centers the image inside the figure */
	max-width: 100%;
	height: auto;
}

figcaption {
	font-style: italic; /* Optional: for better styling */
	margin-top: 10px;   /* Adds space between image and caption */
}

.content-page .content p{
	font-size: 1.2em;
	color: #222;	
}

.content-page .content .date{
	text-align: center;
	font-size: 1em;
	font-weight: bold;
	color: #888;
	padding: 20px 20px;
}

.content-page .content a{
	color: #1a73e0;
}

.content-page .content h2{
	font-size: 1.8em;
	color: #1a73e0;
	margin-top: 40px;
}

.content-page .content li{
	font-size: 1.2em;
	color: #222;
}


.blog-title {
    text-align: center;   /* Center alignment */
}


/* Mobile-specific styles */
@media (max-width: 768px) {
    .container {
        width: 100%; 		/* Make it span the full width on mobile */
		max-width: 100%;
        padding: 0 0.5em; 	/* Optional: Add some padding for better spacing */
    }
	
	.index-page h1{
		font-size: 2em;
		margin: 0.1em;
		padding: 0.1em;
		#transition: background-color 0.3s ease;    
		display: flex;               /* Flexbox for vertical centering */
		justify-content: center;     /* Horizontal centering (flexbox) */
		align-items: center;         /* Vertical centering */	
	}	
	
	.index-page h2{
		font-size: 1.5em;
	}
	
	.index-page .subtitle{
		font-size: 1.5em;

	}
	
	.card-all-container{
		flex-direction: column;
		padding: 0.1em;
	}	
	
	.card-container{
		margin: 0.5em;
		max-width: 90%;
	}
	
	.card-content{
		height: auto;
	}
	
	.card-title {
		font-size: 1rem;
		font-weight: bold;
		margin-top: 0.2em;
		margin-bottom: 0.2em;
		color: #fff;
	}	
	
	.card-excerpt {
		font-size: 0.8rem;
	}
	
	.menu-bar{
		display: flex;
		height: auto;
		justify-content: space-between;
	}
	
	.mobile-only{
		display: block;
	}
	
	.menu-bar .nav-links {
		display: none;
		flex-direction: column;
		width: 100%;
	}
	
	.menu-bar ul{
		align-items: normal;
	}
	.menu-bar li {		
		position: relative;
		padding-top: 0.75em;
		padding-bottom: 0.75em;		
		

		padding-top: 0;
		padding-bottom: 0;
	}
	
	.menu-bar a, span {
		text-decoration: none;
		color: #ddd;
		font-size: 1em;
		padding-left: 1em;
		padding-right: 1em;		
		padding-top: 0.75em;
		padding-bottom: 0.75em;
			
		display: block; /* so it spans whole row */		
	}	
	
	.menu-bar .language-bar  {
		display: flex; /* so it does not split into multiple row */		
	}		
	
	.menu-bar .submenu {
		display: none;
	}

	.menu-bar  .has-submenu.toggled .submenu {
		display: block;
	}	

	/* Opened arrow */
	.menu-bar .has-submenu.toggled {
		background-color: #777;
	}

	/* Change to up arrow when submenu is shown */	
	/* Default arrow (collapsed) */
	.has-submenu > span::after  {
		content: "▼";
		font-size: 1em;
		font-family: monospace; /* Forces equal width */
		#margin-left: 5px;
		margin-left: 0.3em;
		#display: inline-block;
		#transition: transform 0.3s ease;
		text-align: center;	  
	}

	/* Opened arrow */
	.has-submenu.toggled  span::after {
		content: "▲";
	}

	.menu-bar .nav-links.active {
		display: flex;
	}

	.menu-bar .menu-toggle {
		cursor: pointer;
		font-size: 1.75rem;
		margin-left: 0.5em;
		margin-right: 0.5em;
		margin-top: 0.25em;
		margin-bottom: 0.25em;
		color: #fff;		
	}
	
	.menu-bar .submenu {
		width: 100%;
	}
	
	.menu-bar .submenu li a{
		padding-top: 0.75em;
		padding-bottom: 0.75em;
	}
		
	.index-page .button{
		font-size: 1em;
	}
	
	.footer{
		padding-top: 0.5em;
		padding-bottom: 0.1em;
	}
	
	.footer-text{
		font-size: 0.6em;
	}
	
	.desktop-only{
		display: none;
	}
	
}